//  电梯导航
document.addEventListener('scroll', function () {
    var px = $(window).scrollTop()
    var w = 560 - $(window).scrollTop()
    if (w < 40) {
        return $('.content-container').css('top', 70)
    }
    $('.content-container').css('top', 560 - px)
})

// 返回顶部
$('.ding').on('click', function () {
    $('html,body').animate({ scrollTop: 0 }, 500)
})

let flag = true // true 表示有动画正在进行

// 点击
$('.tab li').click(function () {
    // console.log(this);
    if (flag == false) {
        // 如果有，直接退出函数
        return false
    }
    // 3.2 并且关闭节流阀
    flag = false
    // 2.1 获取索引号
    let index = $(this).index()

    // 2.2 点击每个span 获取对应的内容区域的高度
    let currentTop = $('.dt').eq(index).offset().top - 50
    // 2.3 给整个页面做动画，显示对应的区域
    $('html,body').animate(
        {
            scrollTop: currentTop,
        },
        function () {
            // 3.3 动画完成之后通过回调函数打开节流阀
            flag = true
        }
    )

    // 2.4 通过添加类名来改变背景色
    $(this).addClass('bgcolor').css('color', '#fff').siblings().removeClass('bgcolor').css('color', '#000')
})

// 4. 当页面滚动到对应区域的时候，让对应的 span 高亮
$(window).scroll(function () {
    // 如果有动画正在进行，return
    if (flag == false) return
    $('.dt').each(function (i, item) {
        // 4.1 首先获取到每个电梯层离页面顶部的距离
        let floorTop = $(item).offset().top

        // 4.2 当页面滚动到对应区域，让对应的 span 高亮
        if ($(window).scrollTop() + 100 >= floorTop - 1) {
            // - 1  是因为浏览器计算式会丢失精度，可能高亮的不准确
            $('.tab li').eq(i).addClass('bgcolor').css('color', '#fff').siblings().removeClass('bgcolor').css('color', '#000')
        }
    })
    // 最后一个无法变化
    if ($(window).scrollTop() + 100 >= 2400) {
        $('.tab li:last').addClass('bgcolor').css('color', '#fff').siblings().removeClass('bgcolor').css('color', '#000')
    }
})
$('.tab').find('li').eq(0).addClass('bgcolor').css('color', '#fff')

// 导航栏
$(document).ready(function () {
    var n = 0
    var t = 0

    $(window).scroll(function () {
        n = $(this).scrollTop()

        if (t < n) {
            $('.fenlei-items').css('transform', 'translateY(-50%)')
        } else {
            $('.fenlei-items').css('transform', 'translateY(0%)')
        }

        setTimeout(function () {
            t = n
        }, 500)
    })
})
